$(function() {
   // 颜色可选
   $('.l-color li').each(function(i, val) {
      $(this).click(function() {
         $(this).addClass('l-act').siblings().removeClass('l-act')
         $('.l-color li').children('.l-pitch').prop('src','')
         $(this).children('.l-pitch').prop('src','img/act.png')
      })
   })

   // 
   $('.l-list li').each(function(i, val) {
      $(this).hover(function() {
         $(this).addClass('l-active').siblings().removeClass('l-active')
         $('.l-main-img img').eq(0).prop('src', $(this).children().prop('src'))
         $('.l-f-mack img').prop('src', $(this).children().prop('src'))
      })
   })

   // 下拉菜单
   $('.l-watches>p img').click(function() {
      $('.l-div').slideToggle()
   })
   var flag = true
   $('.l-imgs').click(function() {
      $('.l-div dl').eq(3).children('dd').toggle()
      if (flag) {
         $(this).prop('src', 'img/close.png')
         flag = false
      } else {
         $(this).prop('src', 'img/open.png')
         flag = true
      }
   })

   var flag2 = true
   $('.l-img').click(function() {
      if (flag2) {
         $(this).prop('src', 'img/close.png')
         flag2 = false
      } else {
         $(this).prop('src', 'img/open.png')
         flag2 = true
      }
   })

   // 放大镜
   $('.l-main-img').hover(function() {
      $('.l-mack').toggle()
      $('.l-f-mack').toggle()
   })
   $('.l-main-img').mousemove(function(e) {
      var maxX = $(this).width() - $('.l-mack').width();
      var moveX = e.pageX - $(this).offset().left;
      var moveY = e.pageY - $(this).offset().top;
      console.log($('.l-mack').width());
      moveX = moveX - $('.l-mack').width() / 2
      moveY = moveY - $('.l-mack').height() / 2
      console.log(moveX,moveY,maxX);
      if (moveX > maxX) {
         moveX = maxX
      } else if (moveX < 0) {
         moveX = 0
      }
      if (moveY > maxX) {
         moveY = maxX
      } else if (moveY < 0) {
         moveY = 0
      }
      $('.l-mack').css({
         'left': moveX + 'px',
         'top': moveY + 'px'
      })
      var bigX = $('.l-img').width() - $('.l-f-mack').width()
      var bili = bigX / maxX
      $('.l-img').css({
         'left': - moveX * bili + 'px',
         'top': - moveY * bili + 'px',
      })
   })
})